<template>
  <div class="app-container">
    <el-card style="height: 100%;">
      <div class="inforClass">试卷信息</div>
      <el-form ref="formQuery" :model="routeQuery" label-width="80px" label-suffix=":" style="padding: 10px 0">
        <el-row style="height: 100%;" :gutter="50">
          <el-col :span="6">
            <el-form-item label="试卷名称">
              {{ routeQuery.name }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实践课程">
              {{ (practiceTypeList.find(v => v.id == routeQuery.type) || {}).name }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="考试时间">
              {{ routeQuery.time }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="积分上限">
              {{ routeQuery.score }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="inforClass" style="margin-bottom: 10px;">知识问答完成情况</div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="学院列表" name="first">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="学院">
              <el-select v-model="queryParams.faceXy" @change="handlelistProxy" filterable placeholder="请选择" clearable>
                <el-option v-for="item in proxyList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="warning" plain icon="el-icon-download" size="mini" :disabled="tableList.length == 0"
                v-hasPermi="['project:paper:export']" style="font-size: 14px;" @click="handleExport">导出</el-button>
            </el-form-item>
          </el-form>
          <div class="rightNum">
            共{{ tableList.length }}个学院
          </div>
          <el-table v-loading="loading" :data="tableList" style="margin-top: 10px;">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="学院" align="center" prop="xyName" />
            <el-table-column label="任务人数" align="center" prop="allPeople" />
            <el-table-column label="已提交人数" align="center" prop="submittedPeoples" />
            <el-table-column label="未提交人数" align="center" prop="unSubmittedPeoples" />
            <el-table-column label="已提交平均积分数" align="center" prop="submittedAverage" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="专业列表" name="second">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="学院">
              <el-select v-model="queryParams.faceXy" placeholder="请选择" filterable @change="handlelistProzy('学院')"
                clearable>
                <el-option v-for="item in proxyList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业">
              <el-select v-model="queryParams.faceZy" placeholder="请选择" filterable @change="handlelistProzy" clearable>
                <el-option v-for="item in prozyList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="warning" plain icon="el-icon-download" size="mini" :disabled="tableList.length == 0"
                v-hasPermi="['project:paper:export']" style="font-size: 14px;" @click="handleExport">导出</el-button>
            </el-form-item>
          </el-form>
          <div class="rightNum">
            共{{ tableList.length }}个专业
          </div>
          <el-table v-loading="loading" :data="tableList" style="margin-top: 10px;">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="学院" align="center" prop="xyName" />
            <el-table-column label="专业" align="center" prop="zyName" />
            <el-table-column label="任务人数" align="center" prop="allPeople" />
            <el-table-column label="已提交人数" align="center" prop="submittedPeoples" />
            <el-table-column label="未提交人数" align="center" prop="unSubmittedPeoples" />
            <el-table-column label="已提交平均积分数" align="center" prop="submittedAverage" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="学生列表" name="third">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="学院">
              <el-select v-model="queryParams.faceXy" @change="handlelistProbj('学院')" filterable placeholder="请选择"
                clearable>
                <el-option v-for="item in proxyList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业">
              <el-select v-model="queryParams.faceZy" @change="handlelistProbj('专业')" filterable placeholder="请选择"
                clearable>
                <el-option v-for="item in prozyList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="班级">
              <el-select v-model="queryParams.faceBj" @change="handlelistProbj" filterable placeholder="请选择" clearable>
                <el-option v-for="item in probjList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="queryParams.studentName" @input="queryParams.currentPage = 1, quizNj()" placeholder="请输入"
                clearable />
            </el-form-item>
            <el-form-item label="学号">
              <el-input v-model="queryParams.stNumber" @input="queryParams.currentPage = 1, quizNj()" placeholder="请输入"
                clearable />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="queryParams.status" @change="queryParams.currentPage = 1, quizNj()" filterable
                placeholder="请选择" clearable>
                <el-option label="未提交" value="0" />
                <el-option label="已提交" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="warning" plain icon="el-icon-download" size="mini" :disabled="studentList.length == 0"
                v-hasPermi="['project:paper:export']" style="font-size: 14px;" @click="handleExport">导出</el-button>
              <el-button type="primary" plain icon="el-icon-refresh" size="mini" style="font-size: 14px;"
                @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="rightNum">
            共{{ studentList.length }}个学生
          </div>
          <el-table :data="studentList" style="margin-top: 10px;">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="学号" align="center" prop="stNumber">
              <template slot-scope="scope">
                <div>{{ scope.row.stNumber }}</div>
              </template>
            </el-table-column>
            <el-table-column label="学生姓名" align="center" prop="studentName">
              <template slot-scope="scope">
                <div>{{ scope.row.studentName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="学院" align="center" prop="xyName" />
            <el-table-column label="专业" align="center" prop="zyName" />
            <el-table-column label="班级" align="center" prop="bjName" />
            <el-table-column label="提交时间" align="center" prop="createTime" />
            <el-table-column label="分数" align="center" prop="score" />
            <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <!-- <el-button style="color: #f56c6c;" type="text" @click="handleWithdraw(scope.row)" v-if="scope.row.state != 0">
              重 做
            </el-button> -->
                <el-button type="text" @click="handleModifyStatus(scope.row)"
                  v-if="scope.row.state != 0 && scope.row.state != null">
                  详 情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.currentPage"
            :limit.sync="queryParams.currentSize" @pagination="quizNj" />
        </el-tab-pane>
      </el-tabs>


      <!-- 试卷详情 -->
      <el-dialog title="试卷详情" width="60%" :visible.sync="open" append-to-body>
        <el-form ref="form" :model="form" label-width="80px" label-suffix=":">
          <el-card style="margin-top: 5px;margin-bottom: 5px;">
            <el-row>
              <el-col :span="24">
                <div class="inforClass">基本信息</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="试卷名称">
                  <div v-if="routeQuery.name.length < 8">{{ routeQuery.name }}</div>
                  <el-tooltip v-else :content="routeQuery.name" placement="top">
                    <span>{{ routeQuery.name.slice(0, 8) + '...' }}</span>
                  </el-tooltip>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="积分上限">
                  <div>{{ routeQuery.score }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="得分率">
                  <div>{{ ((form.score / routeQuery.score) * 100).toFixed(2) }} %</div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="学号">
                  <div>{{ form.stNumber }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="姓名">
                  <div>{{ form.studentName }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="学院">
                  <div>{{ form.xyName }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="专业">
                  <div>{{ form.zyName }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="班级">
                  <div>{{ form.bjName }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="提交时间">
                  <div>{{ form.createTime }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="试卷类型">
                  <div>
                    {{ routeQuery.type == 1 ? '劳动教育' : routeQuery.type == 2 ? '职业素养' : routeQuery.type == 3 ?
                      '应急安全' : routeQuery.type == 4 ? '思政实践' : '创新创业' }}
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-form>
        <el-row>
          <el-card style="margin-top: 5px;margin-bottom: 5px;">
            <el-col :span="24" style="margin-bottom: 10px;">
              <div class="inforClass">题目详情</div>
            </el-col>
            <el-col :span="24" v-for="(item, index) in topicList" :key="item.id">
              <div style="display: flex; font-weight: 600;align-items: center;">
                <div>{{ index + 1 }}.</div>
                <div style="margin: 0 8px;">[{{ item.type == 1 ? '单选题' : item.type == 2 ? '判断题' : '多选题' }}]</div>
                <div v-html="item.questionContent"></div>
                <div> ({{ item.type == 1 ? routeQuery.selectScore : item.type == 2 ? routeQuery.judgeScore :
                  routeQuery.multipleScore }} 分)</div>
              </div>
              <div v-for="it in item.questionBankOptionList" :key="it.name" class="bankLabelStyle">
                <el-checkbox v-model="it.selected" :label="it.name" style="display: block;"
                  class="non-clickable-checkbox" />
                <span> {{ item.name }}. </span>
                <div style="flex: 1" v-html="it.content"></div>
              </div>
              <div class="maLeft">
                <div style="color: #78c950;" v-if="item.isTurn"><i class="el-icon-success"></i>回答正确</div>
                <div style="color: #fe6c6c;" v-else><i class="el-icon-error"></i>正确答案: {{ item.answerList }}</div>
              </div>
            </el-col>
          </el-card>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="open = false">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script >
import { typeCongfigList } from "@/api/semesManage";
import { getQuizXy, getQuizZy, getQuizXs, getPaperInfo, redoPaper } from "@/api/paperInterlocu/paper";
import { listProxyPost, listProzyPost, listProbjPost } from "@/api/project/prold";

export default {
  name: 'markingView',
  data() {
    return {
      loading: false,
      open: false,
      total: 0,
      // 查询参数
      queryParams: {
        studentName: '',
        stNumber: '',
        currentPage: 1,
        currentSize: 10
      },
      tableList: [],
      studentList: [],
      proxyList: [], // 学院
      prozyList: [], // 专业
      probjList: [], // 年级
      xyName: '',
      zyName: '',
      bjName: '',
      practiceTypeList: [], // 实践课程
      form: {},
      topicList: [],
      routeQuery: {},
      activeName: 'first',
    }
  },
  created() {
    // const permissList = sessionStorage.getItem('practiceTypes').split(',');
    // const typeMap = {
    //   1: { type: '劳动教育', id: 1 },
    //   2: { type: '职业素养', id: 2 },
    //   3: { type: '应急安全', id: 3 },
    //   4: { type: '思政实践', id: 4 },
    //   5: { type: '创新创业', id: 5 }
    // };

    // permissList.forEach(v => {
    //   if (typeMap[v]) {
    //     this.practiceTypeList.push(typeMap[v]);
    //   }
    // });
    this.getTypeCongfigList();
    this.routeQuery = {
      ...this.$route.query
    };
    this.quizXy();
    this.getInit();
  },
  mounted() { },
  methods: {
    getTypeCongfigList() {
      typeCongfigList({
        pageNum: 1,
        pageSize: 50,
      }).then(res => {
        this.practiceTypeList = res.rows;
      });
    },
    getInit() {
      let xyIds = this.$route.query.xyIdList.split(',');
      xyIds.forEach(v => {
        v = String(v);
      });
      let zyIdList = this.$route.query.zyIdList.split(',');
      zyIdList.forEach(v => {
        v = String(v);
      });
      let bjIdList = this.$route.query.bjIdList.split(',');
      bjIdList.forEach(v => {
        v = String(v);
      });
      listProxyPost({ xyIds }).then(response => {
        this.proxyList = response.rows;
      });
      if (this.activeName == 'second') {
        const faceXys = !this.queryParams.faceXy ? null : [this.queryParams.faceXy];
        listProzyPost({ xyIds: faceXys, zyIdList }).then(response => {
          this.prozyList = response.rows;
        });
      } else if (this.activeName == 'third') {
        const faceXys = !this.queryParams.faceXy ? null : [this.queryParams.faceXy];
        const faceZys = !this.queryParams.faceZy ? null : [this.queryParams.faceZy];
        listProzyPost({ xyIds: faceXys, zyIdList }).then(response => {
          this.prozyList = response.rows;
        });
        listProbjPost({ xyIds: faceXys, zyIds: faceZys, bjIdList }).then(response => {
          this.probjList = response.rows;
        });
      }
    },
    changeSelet() {
      let zyIdList = this.$route.query.zyIdList.split(',');
      zyIdList.forEach(v => {
        v = String(v);
      });
      this.prozyList = [];
      const faceXys = !this.queryParams.faceXy ? null : [this.queryParams.faceXy];
      listProzyPost({ xyIds: faceXys, zyIdList }).then(response => {
        this.prozyList = response.rows;
      });
    },
    changeSeletXs() {
      let zyIdList = this.$route.query.zyIdList.split(',');
      zyIdList.forEach(v => {
        v = String(v);
      });
      let bjIdList = this.$route.query.bjIdList.split(',');
      bjIdList.forEach(v => {
        v = String(v);
      });
      this.prozyList = [];
      const faceXys = !this.queryParams.faceXy ? null : [this.queryParams.faceXy];
      const faceZys = !this.queryParams.faceZy ? null : [this.queryParams.faceZy];
      listProzyPost({ xyIds: faceXys, zyIdList }).then(response => {
        this.prozyList = response.rows;
      });
      listProbjPost({ xyIds: faceXys, zyIds: faceZys, bjIdList }).then(response => {
        this.probjList = response.rows;
      });
    },
    handlelistProxy() {
      this.queryParams.faceXy = this.queryParams.faceXy == '' ? null : this.queryParams.faceXy;
      this.getInit();
      this.quizXy();
    },
    handlelistProzy(type) {
      if (type === '学院') {
        this.queryParams.faceZy = null;
      }
      this.changeSelet();
      this.quizZy();
    },
    handlelistProbj(type) {
      if (type === '学院') {
        this.queryParams.faceZy = null;
        this.queryParams.faceBj = null;
      } else if (type === '专业') {
        this.queryParams.faceBj = null;
      }
      this.queryParams.currentPage = 1;
      this.changeSeletXs();
      this.quizNj();
    },
    quizXy() {
      getQuizXy({ id: this.$route.query.id, ...this.queryParams, }).then((res) => {
        this.tableList = res.rows;
      });
    },
    quizZy() {
      getQuizZy({ id: this.$route.query.id, ...this.queryParams, }).then((res) => {
        this.tableList = res.rows;
      });
    },
    quizNj() {
      !this.queryParams.faceXy ? delete this.queryParams.faceXy : this.queryParams.faceXy = this.queryParams.faceXy;
      !this.queryParams.faceZy ? delete this.queryParams.faceZy : this.queryParams.faceZy = this.queryParams.faceZy;
      !this.queryParams.faceBj ? delete this.queryParams.faceBj : this.queryParams.faceBj = this.queryParams.faceBj;
      let dataQuery = { ...this.queryParams };
      if (dataQuery.limit) {
        delete dataQuery.limit;
        delete dataQuery.page;
      }
      // let faceBj = !this.queryParams.faceBj ? this.$route.query.bjIdList : this.queryParams.faceBj;
      getQuizXs({ id: this.$route.query.id, ...dataQuery }).then((res) => {
        this.tableList = [];
        this.studentList = res.data.data;
        this.total = res.data.total;
      });
    },
    handleWithdraw(row) {
      this.$modal
        .confirm('是否确认让"' + row.studentName + '"同学重做？')
        .then(function () {
          return redoPaper(row.id);
        })
        .then(() => {
          this.quizNj();
          this.$modal.msgSuccess("撤回成功");
        })
        .catch(() => {
          // this.$modal.msgSuccess("撤回失败");
        });
    },
    handleClick(tab, event) {
      this.queryParams = {};
      if (tab.label == '学院列表') {
        this.quizXy();
      } else if (tab.label == '专业列表') {
        this.quizZy();
      } else if (tab.label == '学生列表') {
        this.queryParams = {
          currentPage: 1,
          currentSize: 10
        };
        this.quizNj();
      }
      this.getInit();
    },
    handleModifyStatus(row) {
      this.form = { ...row };
      this.open = true;
      getPaperInfo({ id: row.id }).then(res => {
        this.topicList = [...res.data];
        this.topicList.forEach(item => {
          item.questionBankOptionList.forEach(option => {
            if (option.answer === 1) {
              item.answerList = option.name;
            }
            if ((item.type == 1 || item.type == 2) && !item.isTurn) {
              option.selected = option.selected == 1 ? true : false;
              item.isTurn = option.answer === 1 && option.answer == option.selected ? true : false;
            }
            if (item.type == 3) {
              option.selected = option.selected == 1 ? true : false;
            }
          })

          if (item.type == 3) {
            let correctAnswers = item.questionBankOptionList.filter(option => option.answer); // 获取正确答案的选项
            let selectedAnswers = item.questionBankOptionList.filter(option => option.selected); // 获取用户选择的选项
            const isTurn = correctAnswers.every((itemAnswers, index) => itemAnswers.answer === selectedAnswers[index].answer);
            item.isTurn = (correctAnswers.length === selectedAnswers.length) && isTurn ? true : false;
            item.answerList = correctAnswers.map(cyj => cyj.name).join("、");
          }
        })
      });
    },
    handleExport() {
      let xyIdList = this.$route.query.xyIdList.split(',');
      xyIdList.forEach(v => {
        v = String(v);
      });
      let bjIdList = this.$route.query.bjIdList.split(',');
      bjIdList.forEach(y => {
        y = String(y);
      });
      this.download('test/paper/user/quizExport', {
        id: this.$route.query.id,
        ...this.queryParams,
        xyIdList: xyIdList,
        bjIdList: bjIdList,
        bussType: this.activeName == 'first' ? 1 : this.activeName == 'second' ? 2 : 3
      }, `知识问答完成情况.xlsx`)
    },
    resetQuery() {
      this.queryParams = {
        currentPage: 1,
        currentSize: 10,
        studentName: '',
        stNumber: ''
      };
      this.resetForm("queryForm");
      this.quizNj();
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  .el-form-item {
    margin-top: 5px !important;
    margin-bottom: 0 !important;
  }
}

::v-deep .el-dialog__body {
  padding-top: 0 !important;
  padding-bottom: 5px !important;
}

::v-deep .el-progress-bar__outer {
  border-radius: 0 !important;
  overflow: unset !important;
  position: relative;
}

::v-deep .el-progress-bar__inner {
  border-radius: 0 !important;
  position: relative;
}

::v-deep .el-progress-bar__innerText {
  display: none;
  line-height: 50px;
}

::v-deep p {
  margin: 0 !important;
}


.bankLabelStyle {
  display: flex;
  align-items: center;
  margin-left: 20px;
  padding: 8px;
}

.maLeft {
  margin-left: 20px;
  padding-bottom: 15px;
}

.inforClass {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.inforClass::before {
  content: '';
  width: 5px;
  height: 25px;
  background-color: #419eff;
  margin-right: 10px;
  display: inline-block;
}

/* 设置复选框选中时的样式 */
.non-clickable-checkbox.el-checkbox--is-checked .el-checkbox__input {
  border-color: #409EFF;
  /* 选中时的边框颜色 */
  background-color: #409EFF;
  /* 选中时的背景颜色 */
}

/* 禁止点击，但保持选中样式 */
.non-clickable-checkbox {
  pointer-events: none;
}

/* 保持复选框已选中时的样式不变 */
.non-clickable-checkbox .el-checkbox__input.is-checked {
  background-color: #409EFF;
  /* 选中时背景色 */
  border-color: #409EFF;
  /* 选中时边框色 */
  color: white;
  /* 选中时文字颜色 */
}

/* 使复选框状态保持选中样式 */
.non-clickable-checkbox.el-checkbox--is-checked .el-checkbox__inner {
  background-color: #409EFF !important;
  /* 确保选中时的背景色 */
  border-color: #409EFF !important;
}

/* 保持选中复选框时不改变外观 */
.non-clickable-checkbox.is-checked .el-checkbox__input {
  background-color: #409EFF;
  border-color: #409EFF;
}

.rightNum {
  width: 100%;
  text-align: right;
  font-size: 14px;
  color: #a9a9a9;
  margin: -10px 10px 10px 0;
}
</style>
